<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :title="`${dialogProps.title}会员等级`" width="500px">
    <el-form
      ref="ruleFormRef"
      label-width="110px"
      label-suffix=" :"
      :rules="rules"
      :disabled="dialogProps.isView"
      :model="dialogProps.row"
      :hide-required-asterisk="dialogProps.isView"
    >
      <el-form-item label="等级名称" prop="title">
        <el-input v-model="dialogProps.row!.title" placeholder="请填会员等级名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="等级类型">
        <el-radio-group @change="onChangeGradeType" v-model="gradeType">
          <el-radio :value="0" label="充值总金额"></el-radio>
          <el-radio :value="1" label="消费总金额"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        :rules="!gradeType ? rules.rechargeAmount : [{ required: false }]"
        v-if="!gradeType"
        label="充值总金额"
        prop="rechargeAmount"
      >
        <el-input-number
          class="w100"
          v-model="dialogProps.row!.rechargeAmount"
          :min="0"
          controls-position="right"
          :controls="false"
        />
      </el-form-item>
      <el-form-item
        :rules="gradeType ? [{ required: true }] : [{ required: false }]"
        v-else
        label="消费总金额"
        prop="expenditureMoney"
      >
        <el-input-number
          class="w100"
          v-model="dialogProps.row!.expenditureMoney"
          :min="0"
          controls-position="right"
          :controls="false"
        />
      </el-form-item>
      <el-form-item label="会员优惠类型" prop="discountType">
        <el-select class="w100" v-model="dialogProps.row!.discountType">
          <el-option v-for="item in userDiscountTypes" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="会员折扣" prop="discountValue">
        <el-input-number
          class="w100"
          v-model="dialogProps.row!.discountValue"
          :min="1"
          :max="100"
          :formatter="formatter"
          :parser="parser"
          :step="1"
          controls-position="right"
          :controls="false"
        />
        <div style="font-size: 12px; color: #999999">
          说明：会员折扣指当前会员身份所享受会员优惠类型的价格基础上进行的折扣。
          例如：会员优惠类型为销售价，折扣设置80，会员购买该商品的价格=商品销售价*0.8（打八折输入80）
        </div>
      </el-form-item>
      <el-form-item label="是否默认" prop="isDefault">
        <el-select class="w100" v-model="dialogProps.row!.isDefault">
          <el-option v-for="item in memberGradeDefault" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="自动升级" prop="isOpenUpgrade">
        <el-select class="w100" v-model="dialogProps.row!.isOpenUpgrade">
          <el-option v-for="item in memberGradeUpgrade" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="会员优先级" prop="prioritySortId">
        <el-input-number
          disabled
          style="width: 100%"
          :min="0"
          :controls="false"
          v-model="dialogProps.row!.prioritySortId"
        ></el-input-number>
        <div style="color: #999999">说明：优先级越大会员级别越高</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button v-show="!dialogProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="memberDrawer">
import { ref, reactive, onMounted } from "vue";
import { memberGradeDefault, memberGradeUpgrade, userDiscountTypes } from "@/utils/serviceDict";
import { updateValueBasedOnDicType } from "@/utils";
import { ElMessage, FormInstance } from "element-plus";
import { Member } from "@/api/interface";

// 会员类型
const gradeType = ref(0);

const rules = reactive({
  title: [{ required: true, message: "请填会员等级名称" }],
  rechargeAmount: [{ required: true, message: "请设置充值总金额" }]
  // prioritySortId: [{ required: true, message: "请填写会员优先级" }]
});

interface DialogProps {
  title: string;
  isView: boolean;
  row: Partial<Member.ResMemberGradeList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const dialogVisible = ref(false);
// const userDiscountTypes = ref<any[]>([]);
const dialogProps = ref<DialogProps>({
  isView: false,
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps) => {
  // updateValueBasedOnDicType("UserDiscountType", userDiscountTypes);
  dialogProps.value = params;
  dialogVisible.value = true;
  console.log(params);
  gradeType.value = params.row.rechargeAmount ? 0 : 1;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await dialogProps.value.api!(dialogProps.value.row);
      ElMessage.success({ message: `${dialogProps.value.title}会员成功！` });
      dialogProps.value.getTableList!();
      dialogVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

const onChangeGradeType = () => {
  dialogProps.value.row.rechargeAmount = 0;
  dialogProps.value.row.expenditureMoney = 0;
};

const formatter = value => {
  // 显示时保留整数部分
  return value ? Math.floor(value) : "";
};
const parser = value => {
  // 用户输入时，自动转为整数
  return value ? Math.floor(value) : 0;
};

defineExpose({
  acceptParams
});
</script>
